<template>
  <div class="moneylist">
    <div class="alllist">
      <table class="all_tb">
        <tr>
          <th>总金额</th>
          <th>总销售奖励</th>
          <th>总管理津贴</th>
          <th>总提现金额</th>
          <th>
            <div class="name_input">
              姓名：<input type="text" placeholder="姓名查询" v-model="wxm" />
            </div>
          </th>
          <th class="th_found">
            <el-button @click="walletfound(wxm)">
            <i class="el-icon-search"></i> 查询</el-button
          >
            <!-- <router-link
              to=""
              tag="div"
              :class="'found'"
              @click.native="walletfound(wxm)"
            >
              <i class="el-icon-search"></i>查询
            </router-link> -->
          </th>

          <th class="th_reset">
          <el-button @click="resetForm(wxm)">
            <i class="el-icon-refresh-right"></i> 重置</el-button
          >
          </th>
        </tr>
        <tr>
          <td>{{ allJine }}</td>
          <td>{{ allXiaoshou }}</td>
          <td>{{ allGuanli }}</td>
          <td>{{ allTixian }}</td>
        </tr>
      </table>
    </div>

    <div class="liuti">
   
      <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="大客户" name="first">
        <Partnerlist />
      </el-tab-pane>
      <el-tab-pane label="合伙人" name="second">
        <AgencyList />
      </el-tab-pane>

    </el-tabs>
 <el-button type="primary" @click="excelDate" class="daochu">导出数据到Excel</el-button>

    </div>
    
    <!-- <div class="money_tab">
      <router-link
        to="/walletlist/partnerlist"
        tag="div"
        :class="'dl hhr'"
        @click.native="dakehu()"
        >大客户</router-link
      >
      <router-link
        to="/walletlist/agencylist"
        tag="div"
        :class="'dl'"
        @click.native="hehuoren()"
        >合伙人</router-link
      > -->
    <!--  @click="excelDate" -->
    <!-- <router-link
        to="/agencylist"
        tag="button"
        :class="'excel'"
        @click.native="excelDate"
        >导出数据到Excel</router-link
      > -->
    <!-- </div> -->

    <!-- 表格 -->
    <!-- <router-view></router-view> -->

    <!-- 分页条 -->
    <!-- <div class="walletlist_fy">
      <el-pagination
        :page-size="4"
          :current-page.sync="currentPage"
          :page-sizes="[4, 8]"
          layout="total,sizes,prev,pager,next,jumper"
          :hide-on-single-page="false"
          :total2="total"
          @size-change="sizeChange"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script>
import { Bus } from "../../Bus/index";
import Partnerlist from "../../components/table/PartnerList";
import AgencyList from "../../components/table/AgencyList";
import {
  apiGetAgentSum,
  apiGetPartnerSum,
  apiGetKeyNameInfo,
  apiGetParNameInfo,
  apiGetWallettInfo,
  apiGetDateInOut,
} from "@/api/wallet";

export default {
  name: "MoneyList",
  components: {
    Partnerlist,
    AgencyList,
  },
  created() {
    this.onload();
  },
  methods: {
    //触发按钮点击下载事件
    excelDate() {
      this.excelData = this.tableData; //将你要导出的数组数据（historyList）赋值给excelDate
      this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
    },
    //表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = [
          "ID",
          "姓名",
          "手机号",
          "代理级别",
          "代理区域",
          "管理津贴",
          "提现金额",
          "销售奖励",
          "总金额",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "index",
          "name",
          "phone",
          "agency_level",
          "province",
          "manaBounus",
          "soldBounus",
          "cash",
          "allcount",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "钱包列表数据表"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    handleClick(row) {
      this. hehuoren();
      this.dakehu()
    },

    // 获取全部用户
    onload() {
      if (this.qiehuan == 0) {
        apiGetAgentSum({}).then((res) => {
          console.log(res);
          this.tableData = res.res;
        });
      }
      if (this.qiehuan == 1) {
        apiGetParNameInfo({}).then((res) => {
          console.log(res);
          this.tableData = res.msg;
        });
      }
    },

    //通过昵称查询用户、合伙人
    walletfound(val) {
      console.log(val);

      if (this.qiehuan == 0) {
        apiGetKeyNameInfo({
          name: val,
        }).then((res) => {
          console.log(res);
          this.tableData = res.msg;
          this.total = res.msg.length;

          this.$message({ message: "查询成功", type: "success" });
          Bus.$emit("tabledata", res.msg);
        });
      }
      if (this.qiehuan == 1) {
        apiGetParNameInfo({
          name: val,
        }).then((res) => {
          console.log(res);
          this.tableData = res.msg;
          this.total = res.msg.length;

          this.$message({ message: "查询成功", type: "success" });
          Bus.$emit("tabledata2", res.msg);
        });
      }
    },

    // 大客户切换
    dakehu() {
      this.qiehuan = 0;
      if (this.qiehuan == 0) {
        apiGetAgentSum({}).then((res) => {
          console.log(res);
          this.tableData = res.res;
        });
      }
    },

    // 合伙人切换
    hehuoren() {
      this.qiehuan = 1;
      if (this.qiehuan == 1) {
        apiGetPartnerSum({}).then((res) => {
          console.log(res);
          this.tableData = res.msg;
          Bus.$emit("tabledata2", res.msg);
        });
      }
    },

    // 点击重置
    resetForm(val) {
      // 大客户
      if (this.qiehuan == 0) {
        apiGetAgentSum({
          name: val,
        }).then((res) => {
          console.log(res);
          this.tableData = res.res;
          this.$message({ message: "重置成功", type: "success" });
          Bus.$emit("tabledata3", res.res);
        });
      }

      // 合伙人
      if (this.qiehuan == 1) {
        apiGetParNameInfo({
          name: val,
        }).then((res) => {
          console.log(res);
          this.tableData = res.msg;

          this.$message({ message: "重置成功", type: "success" });
          Bus.$emit("tabledata4", res.msg);
        });
      }
    },
  },

  computed: {
    // 总金额
    allJine() {
      let num = 0;
      this.tableData.forEach((item) => {
        num += item.allcount;
      });
      // console.log(num);
      return (this.alljine = num);
    },

    // 总销售奖励
    allXiaoshou() {
      let num2 = 0;
      this.tableData.forEach((item) => {
        num2 += item.cash;
      });
      // console.log(num2);
      return (this.allxiaoshou = num2);
    },

    // 总管理津贴
    allGuanli() {
      let num = 0;
      this.tableData.forEach((item) => {
        if (item.manaBounus == undefined) {
          item.manaBounus = 0;
        }
        num += item.manaBounus;
        console.log(item);
      });
      // console.log(num);
      return (this.allguanli = num);
    },

    // 总提现金额
    allTixian() {
      let num4 = 0;
      this.tableData.forEach((item) => {
        num4 += item.soldBounus;
      });
      // console.log(num4);
      return (this.alltixian = num4);
    },
  },

  data() {
    return {
      activeName: "first", //流体导航栏

      alljine: 0,
      allxiaoshou: 0,
      allguanli: 0,
      alltixian: 0,

      wxm: "",
      tableData: [
        {
          partnerid: "",
          name: "",
          tel: "",
          agency_level: "",
          agency_area: "",
          mange_benefit: "",
          cash_money: "",
          sale_incentive: "",
          total_money: "",
        },
      ],

      // 分页
      // currentPage4: 0,

      //
      qiehuan: 0,
    };
  },
};
</script>

<style  scoped>
@import "../../style/css/WalletList.css";
</style>